<template>
	<div class="template-container">
		<el-form class="el_form" style="display: flex; justify-content: flex-start; padding: 10px 10px 10px 0">
			<el-button type="primary" @click="addTemplate(0, null)">创建模版</el-button>
		</el-form>

		<table-components :tableLoading="tableLoading" :tableData="tableData" @currentChange="currentChange">
			<el-table-column prop="name" label="模版名称" align="center" />
			<el-table-column label="效果图" align="center">
				<template v-slot="scope">
					<img :src="scope.row.imgUrl" class="img" @click="openImg(scope.row)" />
				</template>
			</el-table-column>

			<el-table-column label="模板状态" align="center">
				<template v-slot="scope">
					<el-tag v-if="scope.row.status == 0">启用</el-tag>
					<el-tag type="danger" v-if="scope.row.status == 1">禁用</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="createBy" label="创建人" align="center" />
			<el-table-column prop="createTime" label="创建时间" align="center" />
			<el-table-column label="操作" align="center" width="200">
				<template v-slot="scope">

					<el-button type="text" @click="addTemplate(1, scope.row)">编辑</el-button>
					<el-button type="text" @click="changeSiteTemStatus(scope.row)">启用</el-button>
				</template>
			</el-table-column>
		</table-components>

		<typeChoose :dialogVisible="typeChooseVisble" @handleClose="typeChooseVisble = false"></typeChoose>
	</div>
</template>

<script setup lang="ts" name="role">
import { onMounted, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { NextLoading } from '/@/utils/loading';
import TableComponents from '/@/components/tableComponents/index.vue';
import { getSiteTemplate, doTemplateStatus, siteTemStatus } from '/@/api/api';
import typeChoose from './dialog/typeChoose.vue';

import { useRouter } from 'vue-router';
const router = useRouter();
const typeChooseVisble = ref(false);

const tableData = reactive({
	data: [],
	total: 0,
	page: 1,
	size: 20,
});
const tableLoading = ref(true);
const queryFrom = ref({});
const clickItem = ref({});

// 页面加载时
onMounted(() => {
	NextLoading.done();
	getData();
});

async function getData() {
	tableLoading.value = true;
	let par = {
		page: tableData.page,
		size: tableData.size,
		...queryFrom.value,
	};

	let { code, data } = await getSiteTemplate(par);
	if (code == 200) {
		tableData.data = data.list;
		tableData.total = data.total;
		tableLoading.value = false;
	}
}

//type: 0添加 1编辑
function addTemplate(type, item) {
	if (type == 0) {
		typeChooseVisble.value = true;
	} else {
		router.push({
			path: '/buildPage',
			query: {
				...item,
				site: 1,
			},
		});
	}
}

function openImg(item: any) {
	window.open(item.imgUrl);
}

// 模版启用禁用
// async function doTemplateStatusFn(item: any) {
// 	let { code, data } = await doTemplateStatus({
// 		id: item.id,
// 		status: item.status == 0 ? 1 : 0,
// 	});
// 	if (code == 200) {
// 		ElMessage.success('操作成功');
// 		getData();
// 	}
// }


// 模版启用禁用
// changeSiteTemStatus
async function changeSiteTemStatus(item: type) {
	let { id, status } = item;
	let par = {
		id,
		status: 0
	};
	let { code } = await siteTemStatus(par);
	if (code === 200) {
		ElMessage.success('操作成功');
		getData();
	}
}


</script>

<style scoped lang="scss">
@import url('/@/theme/page/page.scss');

.template-container {
	padding: 0 20px 20px 20px;
}

.img {
	width: 100px;
}
</style>
